import Vue from 'vue'
import Vuex from 'vuex'


import getters from './getters'
import app from './modules/app'
import settings from './modules/settings'
import user from './modules/user'
import A from  './modules/A'
import tagsView from  './modules/tagsView'
// import cancelToken from  './modules/cancelToken'
//安装插件  这个不是写在main.js里面的
Vue.use(Vuex)

const store = new Vuex.Store({
  //全局的state  state:放入共享的状态信息(数据)  类似data
  state: {
    //这里写的数据全部都加入到vue响应式系统中了
    count: 1000,
    info:{
      name:"wfwf",
      age:23,
      height:180
    },
    students: [
      {id: 110, name: "wf", age: 5},
      {id: 111, name: "wf2", age: 15},
      {id: 112, name: "wf3", age: 25},
      {id: 113, name: "wf4", age: 35}
    ],
  },
  //全局的mut
  // 定义处理state里面的数据的方法  类似methods
  mutations:{
    //定义方法  state 式默认有的  可以修改state.count的值
    add(state){
      state.count++
    },
    dec(state){
      state.count--
    },
    //普通写法
    /*  increment(state,counter){
        state.count+=counter
      },*/
    //payload是个对象★★★
    increment(state,payload){
      console.log("加法")
      state.count+=payload.counter
    },
    decrement(state,counter){
      state.count-=counter
    },

    AddStu(state,stu){
      state.students.push(stu)
    },
    //响应式属性,
    //组件 => (dispatch) => actions =>(commit) => mutations
    modifyInf(state){
      state.info.name = "wmz";
      /* 这些都是同步操作
         即使是没有的属性也可以添加的上去
         state.info['address'] = "安徽";
         //添加属性:方法2
         Vue.set(state.info,'area',"滁州");
         //删除属性(delete是响应式的)
         delete state.info.age;
         //第二种删除属性
         Vue.delete(state.info,"name");
       */

      /* setTimeout(function () {
         //异步操作的时候vuex插件不能立刻捕获改之后的结果这个问题必须在actions里解决
         state.info.name = "wmz"
       },1000)*/
    }
  },
  //全局的act
  actions:{
    // 异步操作放置在这里  默认参数context(上下文) == 第六行的store对象
    // 默认参数 context,payload是传进来的参数例如'xxx'
    updateInfo(context,payload){
      /*异步操作为什么不能在mutations里面写？因为页面数据虽然刷新但是devtools里面的数据不会变出现了分歧
      本质★★★:异步操作拿外边的数据？

         setTimeout(function () {
         //modifyInf是mutations里面的方法名称
         // 组件 => (dispatch) => actions =>(commit) => mutations
         context.commit('modifyInf');
         //payload参数
         //这里要平行看
         // console.log(payload);
         // payload();
          console.log(payload.message)
          payload.success();
        },1000)

        */
      // 本质★★★:异步操作使用的外面的数据 && 异步操作内部数据传出去给外部使用
      console.log("context:",context)
      // actions 里面可以继续dispatch
      context.dispatch('cont2',payload);
      return new Promise((resolve ,reject)=>{
        setTimeout(function () {
          //异步操作的内容
          context.commit('modifyInf');
          console.log("payload",payload);
          resolve("11111")
        },2000)
      })


    },
    cont2(context,payload){
      console.log(context,"做了什么事情")
      context.dispatch('cont3',payload);
    },
    cont3(context,payload){
      console.log(context,"又做了什么事情")
    }
  },
  //全局的getters
  getters,
  modules: {
    //三个模块分别由对应的state  actions mutations getters ...
    A,
    app,
    settings,
    user,
    tagsView
    // cancelToken
  },

})

export default store


/*
  //模块划分,意思是 虽然不推荐创建多个store,但是可以创建多个模块modules
  //a,b这俩属性会默认增加在state里面★★★★
    modules:{
      a:moduleA,
      b:moduleB
    }

})*/


